<template>
  <div class="footer">
    <div class="footer-content w">
      <div>
        <h3>平台服务</h3>
        <ul>
          <li>意见箱</li>
          <li>项目/委托举报</li>
          <li>申诉</li>
        </ul>
      </div>
      <div>
        <h3>链接</h3>
        <ul>
          <li>Gitee</li>
          <li>个人博客</li>
        </ul>
      </div>
      <div>
        <h3>关于我们</h3>
        <ul>
          <li>QQ: 12345678</li>
          <li>Email: 12345678@qq.com</li>
        </ul>
      </div>
    </div>

    <div class="footer-title">
      
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.w {
  width: 80% !important;
  background-color: #222831;
}
.footer {
  width: 100%;
  margin-top: 30px;
  background-color: #222831;
  color: #a8abb2;

  .footer-content {
    width: calc(100% - 60px);
    height: 200px;
    // border: 2px solid @border-color;
    padding-top: 20px;
    margin: 0 auto;

    display: flex;

    &>div {
      width: calc((100% - 600px) / 3);
      padding-left: 60px;
      // border-right: 1px solid @border-color;

      h3 {
        font-size: 20px;
        color: #fff;
      }

      li {
        padding-top: 10px;
      }
    }

  }
}


// 标题中划线
.hyphenOfTitle::before,
.hyphenOfTitle::after {
  content: "";
  display: inline-block;
  width: 80px;
  border-top: 1px solid #d2d2d3;
  position: relative;
  top: -10px;
}
</style>